<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>员工列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <style type="text/css">
        .layui-table-cell{height:40px;line-height:40px;}
    </style>
</head>
<body>
<!--搜索框-->
<blockquote class="layui-elem-quote quoteBox mod_default_box">
    <div class="layui-form" style="text-align: center">
        <div class="layui-inline">
            <div class="layui-inline">
                <input class="layui-input" name="id" id="test-table-demoReload" placeholder="输入模板名称" autocomplete="off">
            </div>

            <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-admin search" lay-submit lay-filter="LAY-user-back-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                </button>
            </div>
        </div>
    </div>
</blockquote>
<!--数据列表-->
<table class="layui-hide" id="t" lay-filter="t"></table>
<script type="text/html" id="tb">
    <div class="layui-container" style="margin-left:0px;">
        <a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-addition"></i>新增正面模板</a>
    </div>
</script>

<script type="text/html" id="caozuo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"><i class="layui-icon layui-icon-edit"></i>编辑</a>
</script>
<script type="text/html" id="checkboxTpl">
    <input type="checkbox" name="status" value="{{d.id}}" title="启用" lay-filter="lockDemo" {{ d.status == 1 ? 'checked' : '' }} />
</script>

<script src="/js/layui/layui.js"></script>

<script>

    var $ = undefined

    layui.use(['table'], function() {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        table.render({
            elem: '#t',
            id: 'tt',
            toolbar: '#tb',
            url: '/mobanZm/selectMobanZm',
            cols: [
                [{field: 'id',title: '序号',width:70,type:'numbers',align: 'center'},
                    {field: 'name',title: '模板名称',align: 'center',width: 110},
                    {field: 'haopaiX',title: '号牌号码X',align: 'center',width: 110},
                    {field: 'haopaiX',title: '号牌号码Y',align: 'center',width: 110},
                    {field: 'clTypeX',title: '车辆型号X',align: 'center',width: 110},
                    {field: 'clTypeY',title: '车辆型号Y',align: 'center',width: 110},
                    {field: 'nameX',title: '所有人X',align: 'center',width: 110},
                    {field: 'nameY',title: '所有人Y',align: 'center',width: 110},
                    {field: 'addressX',title: '住址X',align: 'center',width: 110},
                    {field: 'addressY',title: '住址Y',align: 'center',width: 110},
                    {field: 'pinpaiTypeX',title: '品牌型号X',align: 'center',width: 110},
                    {field: 'pinpaiTypeY',title: '品牌型号Y',align: 'center',width: 110},
                    {field: 'useX',title: '使用性质X',align: 'center',width: 110},
                    {field: 'useY',title: '使用性质Y',align: 'center',width: 110},
                    {field: 'clsbdyX',title: '车辆识别代码X',align: 'center',width: 130},
                    {field: 'clsbdyY',title: '车辆识别代码Y',align: 'center',width: 130},
                    {field: 'fdjX',title: '发动机号码X',align: 'center',width: 110},
                    {field: 'fdjY',title: '发动机号码Y',align: 'center',width: 110},
                    {field: 'registerX',title: '注册时间X',align: 'center',width: 110},
                    {field: 'registerY',title: '注册时间Y',align: 'center',width: 110},
                    {field: 'fzX',title: '发证时间X',align: 'center',width: 110},
                    {field: 'fzY',title: '发证时间Y',align: 'center',width: 110},
                    {field: 'bg',title: '背景图片',align: 'center',templet: '<div><img src="/upload/{{ d.bg }}" style="" onclick="previewImgs(this)"></div>',width: 120},
                    {field:'status',align : 'center', title:'状态', templet: '#checkboxTpl',width: 110 , fixed:"right"},
                    {toolbar: '#caozuo',title: '操作',align: 'center',fixed: 'right',width: 180}
                ]
            ],
            limit:10,
            page: true,
            page: {
                curr: layui.data("mobanZm_page").index
            },
            done: (res, curr, count) => {
                layui.data("mobanZm_page", {
                    key: 'index',
                    value: curr
                });
            }
        });

        //搜索
        $('.search').on('click',function () {
            var text = $('#test-table-demoReload').val();
            table.reload('tt',{
                url:'/mobanZm/selectMobanZm',
                where:{
                    name:text
                },
                page:{
                    curr:1
                }
            })
        });

        //监听工具条
        table.on('tool(t)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                var index = layer.open({
                    type: 2,
                    area: ['100%', '100%'],
                    content: 'upd_mobanZm.html?id='+data.id+"&bg="+data.bg+"&name="+data.name+"&status="+data.status+
                        "&clTypeX="+data.clTypeX+"&clTypeY="+data.clTypeY+"&nameX="+data.nameX+"&nameY="+data.nameY+
                        "&haopaiX="+data.haopaiX+"&haopaiY="+data.haopaiY+"&addressX="+data.addressX+"&addressY="+data.addressY+
                        "&pinpaiTypeX="+data.pinpaiTypeX+"&pinpaiTypeY="+data.pinpaiTypeY+"&useX="+data.useX+"&useY="+data.useY+
                        "&clsbdyX="+data.clsbdyX+"&clsbdyY="+data.clsbdyY+"&fdjX="+data.fdjX+"&fdjY="+data.fdjY+
                        "&registerX="+data.registerX+"&registerY="+data.registerY+"&fzX="+data.fzX+"&fzY="+data.fzY, //这里content是一个普通的String
                    end: function(){
                        location.reload();
                    }
                });
                layer.full(index);
            }
        });

        table.on('toolbar(t)', function (obj) {
            if (obj.event === 'add') {
                var index = layer.open({
                    type: 2,
                    area: ['320px', '195px'],
                    maxmin: true,
                    content: 'add_mobanZm.html', //这里content是一个普通的String
                    end: function(){
                        location.reload();
                    }
                });
                layer.full(index);
            }
        });

        //监听启用操作
        form.on('checkbox(lockDemo)', function(obj){
            var id = this.value;
            var status = obj.elem.checked;
            var zhuangtai;
            if(status){
                zhuangtai=1;
            }else{
                zhuangtai=0;
            }
            $.ajax({
                url:"/mobanZm/updMobanZmStatus"
                ,type:"get"
                ,data:{id:id,status:zhuangtai}
                ,contentType: 'application/json'
                ,success:function (data) {
                    if(data.code==0){
                        layer.close(layer.index);
                        layer.msg('操作成功');
                    }else if(data.code==1){
                        layer.msg('操作失败');
                    }else{
                        layer.msg('没有权限');
                    }
                }
                ,error:function () {
                    console.log("ajax error");
                }
            });
        });

        $('.test-table-operate-btn .layui-btn').on('click', function () {
            var type = $(this).data('type')
            active[type] ? active[type].call(this) : ''
        })
    });

</script>

<script>
    function previewImgs(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='800px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [800 + 'px', 550 + 'px'],  // area: [width + 'px',height+'px']  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }


</script>
</body>
</html>